<div>
  <h3 class="first">Basic {{val1}}</h3>
  <p-rating [(ngModel)]="val1"></p-rating>

  <h3>Callback {{val2}}</h3>
  <p-rating [(ngModel)]="val2" (onRate)="handleRate($event)" (onCancel)="handleCancel($event)"></p-rating>
  <span *ngIf="msg" style="margin-left:10px">{{msg}}</span>

  <h3>No Cancel {{val3}}</h3>
  <p-rating [(ngModel)]="val3" [cancel]="false"></p-rating>

  <h3>ReadOnly</h3>
  <p-rating [ngModel]="5" readonly="true" stars="10" [cancel]="false"></p-rating>

  <h3>Disabled</h3>
  <p-rating [ngModel]="val4" disabled="true" stars="10"></p-rating>

  <h3>Custom Icons</h3>
  <p-rating [ngModel]="val5" iconOnClass="fa-circle" iconOffClass="fa-circle-o" iconCancelClass="fa-close">;</p-rating>
</div>
